<template>
	<view class="kui-cell kui-bg-white kui-pt-3 kui-pr-3 kui-pl-3" :id="data.id" :style="{
	  borderTopLeftRadius: `${data.topRadius}rpx`,
	  borderTopRightRadius: `${data.topRadius}rpx`,
	  borderBottomLeftRadius: `${data.isBorder ? 0 : data.bottomRadius}rpx`,
	  borderBottomRightRadius: `${data.isBorder ? 0 : data.bottomRadius}rpx`,
	  backgroundColor: data.backgroundColor,
	  marginBottom: `${data.marginBottom}rpx`
  }" @touchstart="tapstart" @touchend="tapend" @click="onClick">
		<view class="kui-flex kui-justify-between" :class="center ? 'kui-items-center' : ''">
			<view class="kui-flex kui-items-center kui-w-full">
				<!-- #ifndef MP-WEIXIN -->
				<slot name="left-icon">
					<view class="kui-mr-1" v-if="icon">
						<kui-icons :type="icon" :size="50" color="#999"></kui-icons>
					</view>
				</slot>
				<!-- #endif -->
				<!-- #ifdef MP-WEIXIN -->
				<template v-if="$slots['left-icon']">
					<view class="kui-mr-1">
						<slot name="left-icon"></slot>
					</view>
				</template>
				<template v-else>
					<view class="kui-mr-1" v-if="icon">
						<kui-icons :type="icon" :size="50" color="#999"></kui-icons>
					</view>
				</template>
				<!-- #endif -->
				<slot name="content">
					<view class="kui-flex kui-flex-col">
						<text class="" :style="{
				    fontSize: `${data.titleSize}${theme.size.fontUnit}`,
					fontWeight: data.titleWeight,
					lineHeight: `${theme.size.fonts['lg'] + theme.size.lineBase}${theme.size.fontUnit}`,
					color: data.color
				  }">{{ title }}</text>
						<text class="kui-mt-1" :style="{
							fontSize: `${theme.size.fonts['base']}${theme.size.fontUnit}`,
							lineHeight: `${theme.size.fonts['base'] + theme.size.lineBase}${theme.size.fontUnit}`,
							color: data.subTitleColor
						}" v-if="subTitle">{{ subTitle }}</text>
					</view>
				</slot>
			</view>
			<view class="kui-h-auto kui-leading-none kui-flex kui-w-full kui-flex kui-justify-end" :class="center ? 'kui-items-center' : ''">
				<text class="kui-mr-1" :style="{
					fontSize: `${theme.size.fonts['lg']}${theme.size.fontUnit}`,
					color: data.descColor
				}">{{ desc }}</text>
				<view class="kui-flex kui-flex-col kui-justify-center" v-if="showRightIcon">
					<!-- #ifndef MP-WEIXIN -->
					<slot name="right-icon">
						<kui-icons type="keyboard_arrow_right" :size="44" color="#999" :weight="100"></kui-icons>
					</slot>
					<!-- #endif -->
					<!-- #ifdef MP-WEIXIN -->
					<template v-if="!$slots['right-icon']">
						<kui-icons type="keyboard_arrow_right" :size="44" color="#999" :weight="100"></kui-icons>
					</template>
					<template v-else>
						<slot name="right-icon">
						</slot>
					</template>
					<!-- #endif -->
				</view>
			</view>
		</view>
		<view class="kui-pt-3">
			<view class="kui-border-0 kui-border-solid kui-border-b-rpx kui-border-gray-200" v-if="data.isBorder"></view>
		</view>
	</view>
</template>

<script lang="ts">
	import {
		defineComponent,
		getCurrentInstance,
		SetupContext,
		reactive,
		onMounted,
		defineEmits,
		inject
	} from "vue";
	import CellProps from "./props";
	
	import Color from 'color';

	const name = "kui-cell";

	export default defineComponent({
		name,
		props: CellProps,
		emits: ['click'],
		setup(props, context: SetupContext) {
			// 随机生成元素ID
			const elId = `kUI_${Math.ceil(new Date().getTime() * 10e5).toString(36)}`;
			
			const {
				proxy
			}: any = getCurrentInstance();
			const theme = proxy.$theme;

			const data = reactive({
				id: elId,
				topRadius: props.radius,
				bottomRadius: props.radius,
				isBorder: false,
				marginBottom: 0,
				titleSize: props.titleSize ? props.titleSize : theme.size.fonts['lg'],
				titleWeight: props.titleWeight,
				color: props.color ? props.color : theme.colors[props.mode]['grey'][8],
				subTitleColor: props.subTitleColor ? props.subTitleColor : theme.colors[props.mode]['grey']
					[7],
				descColor: props.descColor ? props.descColor : theme.colors[props.mode]['grey'][4],
				mode: props.mode,
				backgroundColor: '#FFFFFF'
			});
			
			/**
			 * 获取cell group实例
			 */
			const getCellGroup = () => {
				return inject('cell-group');
			}
			
			const cellGroup = getCellGroup();
			
			const changeMode = (steep = 0) => {
				data.color =
					data.mode === "light" ? (props.color ? props.color : theme.colors[props.mode]['grey'][8]) : (props.color ? uni.kviewUIColor.generate(props.color, {
				dark: true,
				list: false,
				index: 6,
			}) : theme.colors['dark']['grey'][9]);
				data.backgroundColor =
					data.mode === 'light' ? '#FFFFFF' : theme.colors['dark']['grey'][2];
				data.subTitleColor = 
					data.mode === "light" ? (props.color ? props.color : theme.colors[props.mode]['grey'][7]) : (props.color ? uni.kviewUIColor.generate(props.color, {
						dark: true,
						list: false,
						index: 7,
					}) : theme.colors['dark']['grey'][7]);
				data.descColor = 
					data.mode === "light" ? (props.descColor ? props.descColor : theme.colors[props.mode]['grey'][4]) : (props.descColor ? `hsl(${theme.colors.darken(props.descColor).color[0]},${theme.colors.darken(props.descColor).color[1]}%,${theme.colors.darken(props.descColor).color[2]}%)` : theme.colors['dark']['grey'][4]);
			};
			
			onMounted(() => {
				// 判断父元素实例没有包含子元素实例，则初始化子元素实例操作
				if (cellGroup && cellGroup.childrens.indexOf(data) === -1) {
				  cellGroup.childrens.push(data);
				}
				changeMode();
				// 监听暗黑模式
				uni.$on('changeMode', (e) => {
					data.mode = e;
					changeMode();
				})
			});
			
			const tapstart = () => {
				if (props.clickStatus) {
					data.backgroundColor = data.mode == 'light' ? theme.colors[data.mode]['grey'][2] : theme.colors[data.mode]['grey'][3];
				}
			}
			
			const tapend = () => {
				changeMode();
			}
			
			const onClick = () => {
				if (props.url) {
					if (props.url.indexOf('http') > -1) {
						// #ifdef H5
						location.href = props.url;
						// #endif
						// #ifndef H5
						uni.setClipboardData({
							data: props.url,
							showToast: true,
							success() {
								uni.showToast({
									title: '已复制到粘贴板'
								});
							}
						})
						// #endif
					} else {
						uni.navigateTo({
							url: props.url,
							fail: (fil) => {
								console.warn(`Cell Debug Info: ${fil.errMsg}` );
							}
						})
					}
				} else {
					context.emit('click');
				}
			}

			return {
				theme,
				data,
				tapstart,
				tapend,
				onClick
			};
		},
	});
</script>

<style scoped>
	.gg-abstract {
		box-sizing: border-box;
		position: relative;
		display: block;
		width: 14px;
		height: 14px;
		transform: scale(2);
		border-right: 3px solid;
		border-top: 3px solid;
		color: green;
	}

	.gg-abstract::before {
		content: "";
		display: block;
		box-sizing: border-box;
		position: absolute;
		width: 10px;
		height: 10px;
		left: 0;
		bottom: 0;
		border: 3px solid;
		border-radius: 12px;
		border-color: black;
	}
</style>
